<template>
    
    <div class="msgchart">
        <div class="chart" ref="dischart">
            <div class="title">
                <span class="name">事件统计图</span>
                <span @click="del" class="deleat">X</span>
            </div>

            <div class="chartway">
                <div @click="month" class="mon">按月份统计</div>
                <div @click="type" class="typ">按类型统计</div>
            </div>

            <div class="num">交通事件({{ piedata.piedata.length }})</div>

            <div class="piechart" ref="typechart">
                <v-chart :option="option1" class="chart1"></v-chart>

            </div>
            <div class="piechart2" ref="monthchart">
                <v-chart :option="option2" class="chart2"></v-chart>
            </div>

        </div>
    </div>
</template>

<script setup>
import { defineProps, ref, onMounted, watch } from 'vue';
import { useMenuStore } from "../../store/index";
import * as echarts from 'echarts'

let monthchart = ref()
let typechart = ref()

let option1 = ref()
let option2 = ref()

let numbers1 = ref()
let numbers2 = ref()
let numbers3 = ref()
let numbers4 = ref()
let numbers5 = ref()
let numbers6 = ref()

let jan = ref()
let feb = ref()
let mar = ref()
let apr = ref()
let may = ref()
let jun = ref()
let jul = ref()
let aug = ref()
let sep = ref()
let oct = ref()
let nov = ref()
let dec = ref()

let dischart = ref()

let $store = useMenuStore()
let piedata = defineProps({
    piedata: Array
})
let change = 1


watch(() => $store.addchart, val => {
    if (val == 2) {
        dischart.value.style.visibility = "visible"
        $store.addchart = 1
    } else {
    }
})
watch(piedata, () => {
    if (change == 1) {
        let pie = piedata.piedata.map(item => item.事件类型)
        // console.log(piedata.piedata.map(item => item.发生时间.slice(5, 7)), 888)
        let Month = piedata.piedata.map(item => item.发生时间.slice(5, 7))
        // console.log(Month, 99999)
        jan = Month.filter(num => num == "1.").length
        feb = Month.filter(num => num == "2.").length
        mar = Month.filter(num => num == "3.").length
        apr = Month.filter(num => num == "4").length
        may = Month.filter(num => num == "5").length
        jun = Month.filter(num => num == "6").length
        jul = Month.filter(num => num == "7").length
        aug = Month.filter(num => num == "8").length
        sep = Month.filter(num => num == "09").length
        oct = Month.filter(num => num == "10").length
        nov = Month.filter(num => num == "11").length
        dec = Month.filter(num => num == "12").length

        numbers1 = pie.filter(num => num == "碰撞").length
        numbers2 = pie.filter(num => num == "刮擦").length
        numbers3 = pie.filter(num => num == "其他").length
        numbers4 = pie.filter(num => num == "失火").length
        numbers5 = pie.filter(num => num == "翻车").length
        numbers6 = pie.filter(num => num == "碾压").length

        option1 = {
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: 'vertical',
                left: "left",
            },
            series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: ["0%", "60%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: "#fff",
                        borderWidth: 1,
                    },
                    label: {
                        show: true,
                        position: "outside",
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 10,
                            fontWeight: "bold",
                        },
                    },
                    labelLine: {
                        show: true,
                    },
                    data: [
                        { value: numbers1, name: "碰撞" },
                        { value: numbers2, name: "刮擦" },
                        { value: numbers3, name: "其他" },
                        { value: numbers4, name: "失火" },
                        { value: numbers5, name: "翻车" },
                        { value: numbers6, name: "碾压" },
                    ],
                },
            ],
        }
        option2 = {
            tooltip: {
                trigger: "item",
            },
            legend: {
                orient: 'vertical',
                left: "left",
            },
            series: [
                {
                    name: "Access From",
                    type: "pie",
                    radius: ["0%", "60%"],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 0,
                        borderColor: "#fff",
                        borderWidth: 1,
                    },
                    label: {
                        show: true,
                        position: "outside",
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 10,
                            fontWeight: "bold",
                        },
                    },
                    labelLine: {
                        show: true,
                    },
                    data: [
                        { value: jan, name: "1" },
                        { value: feb, name: "2" },
                        { value: mar, name: "3" },
                        { value: apr, name: "4" },
                        { value: may, name: "5" },
                        { value: jun, name: "6" },
                        { value: jul, name: "7" },
                        { value: aug, name: "8" },
                        { value: sep, name: "9" },
                        { value: oct, name: "10" },
                        { value: nov, name: "11" },
                        { value: dec, name: "12" },
                    ],
                },
            ],
        }
    } else if (change == 2) {
        console.log(change)
    }
})

const month = () => {
    typechart.value.style.display = "none"
    monthchart.value.style.display = "flex"
    monthchart.value.style.visibility = "visible"
}
const type = () => {
    typechart.value.style.display = "flex"
    monthchart.value.style.display = "none"
    monthchart.value.style.visibility = "hidden"
}
const del = () => {
    dischart.value.style.visibility = "hidden"
    monthchart.value.style.display = "none"
}
</script>

<style scoped>
/* 图标弹窗样式 */

.chart2 {
    display: flex;
}

.chart1 {
    display: flex;
}

.msgchart {
    width: 500px;
    height: 430px;
}

.chart {
    /* visibility: visible; */
    visibility: hidden;
    position: fixed;
    width: 500px;
    height: 430px;
    z-index: 2000;
    top: 25%;
    left: 32%;
    background-color: #fff;
    border-radius: 8px;
}

.title {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #a29e9e;
    margin-bottom: 8px;
}

.name {
    font-size: 18px;
}

.chartway {
    display: flex;
    gap: 6px;
}

.chartway div {
    background-color: rgb(69, 226, 174);
    width: 120px;
    height: 35px;
    font-size: 18px;
    text-align: center;
    padding-top: 3px;
    border-radius: 5px;
    margin-left: 5px;
}

.num {
    margin-left: 5px;
    margin-top: 5px;
    font-size: 18px;
    font-weight: 700;
}

.piechart {
    display: flex;
    width: 500px;
    height: 300px
}

.piechart2 {
    visibility: hidden;
    width: 500px;
    height: 300px
}

.typ:hover {
    cursor: pointer;
}

.mon:hover {
    cursor: pointer;
}

.deleat:hover {
    cursor: pointer;
}</style>